<hr class="layui-bg-gray">
<hr class="layui-bg-gray">

<div style="width: 100%;">

    <table style="width: 100%;" id="sea-tab">
        <tr style="width: 100%;height: 40px">
            <td style="width:100px; text-align:left">角色名称：</td>
            <td style="text-align:left"><input name="name" id="roleName" style="width: 150px;height: 19px"></td>
            <td style="width: 80px; text-align:center"><button onclick="queryRole()" style="width: 60px; cursor:pointer">查 询</button></td>
            <td style="width: 80px; text-align:center"><button onclick="clearInput()" style="width: 60px; cursor:pointer">重 置</button></td>
            <td style="text-align:center">|</td>
            <td style="width: 80px; text-align:center"><button onclick="fillRoleInfo()" style="width: 60px; cursor:pointer">新增</button></td>
            <td style="text-align:center">|</td>
            <td style="width: 80px; text-align:center"><button id="delRoles" style="width: 60px; cursor:pointer">批量删除</button></td>
        </tr>
    </table>

</div>

<hr class="layui-bg-gray" id="tempRoleMenuId">
<hr class="layui-bg-gray" id="tempMenuRoleId">

<table class="layui-hide" id="pagingInfo" lay-filter="pagingInfo" style="width: 100%"></table>

<script type="text/html" id="roleBar">
    <a class="layui-btn layui-btn-xs" lay-event="detail">编辑角色菜单</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    $(function () {
        roleInfo(null);
    })

    function queryRole() {
        var name = $('#roleName').val();
        roleInfo(name);
    }

    function clearInput() {
        $('#sea-tab input').val('');
        //document.getElementById("roleName").value="";
    }


    function fillRoleInfo() {
        layer.open({
            title:'添加角色',
            id: 'LAY_roleAdd',//设定一个id，防止重复弹出
            type: 1,
            area: ['350px', '220px'],
            shadeClose: true,
            closeBtn: 0,
            btn: ['添加','取消'],
            content: getHtml('/sys/role/edit.html'),
            yes: function(){
                layer.closeAll();
                // 执行确定逻辑
                addRole();
            }
            ,btn2: function(){
                layer.closeAll();
            }
        });
    }

    function addRole() {
        let name = $('#erName1').val();
        let remark = $('#erMark1').val();

        let url = 'role/addRecord';
        let params = {'name':name,'remark':remark};

        $.ajax({  "type":"post",
            "url":url,
            "data":params,
            "success":function(result){
                //alert(result.desc);
                layer.msg(result.desc);
                loadRolePaging();
            }})
    }

    function updateRole() {
        let id = $('#erId1').val();
        let name = $('#erName1').val();
        let remark = $('#erMark1').val();

        let url = 'role/updateOneById';
        let params = {'id':id,'name':name,'remark':remark};

        $.ajax({  "type":"post",
            "url":url,
            "data":params,
            "success":function(result){
                //alert(result.desc);
                layer.msg(result.desc);
                loadRolePaging();
            }})
    }


    function deleteRoleByIds(ids) {
        layer.confirm('确定删除吗?', function(){
            let url = 'role/deleteByIds';
            $.ajax({  "type":"post",
                "url":url,
                "data":{'ids':ids},
                "success":function(result){
                    //alert(result.desc);
                    layer.msg(result.desc);
                    loadRolePaging();
                }
            })
        });
    }


    // 编辑角色菜单
    function editRoleMenu(roleId) {
        layer.open({
            title:'编辑角色菜单',
            id: 'LAY_roleMenu',//设定一个id，防止重复弹出
            type: 1,
            area: ['300px', '400px'],
            shadeClose: true,
            closeBtn: 0,
            btn: ['确定','关闭'],
            content: getHtml('/sys/role/menu.html'),
            yes: function(index){
                // 更新角色菜单
                layui.use('tree', function() {
                    var tree = layui.tree
                    var checkedData = tree.getChecked('roleMenuDataId'); //获取选中节点的数据
                    let ids = getCheckedIds(checkedData);
                    //layer.alert(ids);
                    updateRoleMenu(roleId,ids);
                })

                layer.close(index);
            },
            btn2: function(index){
                layer.close(index);
            }
        });
    }

    // 更新角色菜单
    function updateRoleMenu(roleId,ids) {
        $.ajax({  "type":"post",
            "url":'role/updateRoleMenus',
            "data":{'roleId':roleId,'menuIds':ids},
            "success":function(result){
                //alert(result.desc);
                layer.msg(result.desc);
            }
        })
    }

    // 获取角色菜单信息
    function getRoleMenuIds(roleId) {
        $.ajax({  "type":"post",
            "url":'role/getRoleMenuList',
            "data":{'roleId':roleId},
            "success":function(res){
                if (res.errorCode == '0'){
                    var menuIds = [];
                    let data = res.data;
                    for (let i = 0; i < data.length; i++) {
                        menuIds.push(data[i].id);
                    }

                    console.log('打印1-'+menuIds);
                    $('#tempRoleMenuId').data('tempRoleMenuId',menuIds);
                }
            }
        })
    };

</script>

<script>
    layui.use('table', function(){
        var table = layui.table;
        //监听表格复选框选择
        table.on('checkbox(pagingInfo)', function(obj){
            console.log(obj)
        });
        //监听工具条
        table.on('tool(pagingInfo)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                //layer.msg('ID：'+ data.id + ' 的查看操作');
                $('#tempMenuRoleId').attr('tempMenuRoleId',data.id);
                //getRoleMenuIds(data.id);
                editRoleMenu(data.id);
            } else if(obj.event === 'del'){
                deleteRoleByIds(data.id);

            } else if(obj.event === 'edit'){
                // 编辑操作
                $('#page-com').data('roleBar',data);

                layer.open({
                    title:'修改角色',
                    id: 'LAY_roleEdit',//设定一个id，防止重复弹出
                    type: 1,
                    area: ['350px', '220px'],
                    shadeClose: true,
                    closeBtn: 0,
                    btn: ['修改','取消'],
                    content: getHtml('/sys/role/edit.html'),
                    yes: function(index){
                        layer.close(index);
                        // 执行确定逻辑
                        updateRole();
                        loadRolePaging();
                    }
                    ,btn2: function(index){
                        layer.close(index);
                    }
                });
            }
        });

        //批量删除
        $('#delRoles').click(function () {
            var checkStatus = table.checkStatus('roleDataList');
            var ids = [];
            $(checkStatus.data).each(function (i, o) {//o即为表格中一行的数据
                ids.push(o.id);
            });
            if (ids.length < 1) {
                layer.msg('无选中项');
                return false;
            }
            ids = ids.join(",");

            // 指删除操作
            alert(ids);
        });

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>